<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../css/element.css">
    <script src="../../js/vue2.6.js"></script>
    <script src="../../js/element.js"></script>
    <script src="../../js/jquery.min.js"></script>
</head>
<body>
<div id="app">
    <template>
        <div style="padding: 20px;background-color: white;border-radius: 15px">
            <el-button-group>
                <el-button @click="dialogFormVisible = true"  icon="el-icon-plus"></el-button>
                <el-button @click="editorData"  icon="el-icon-edit"></el-button>
                <el-button  icon="el-icon-delete"></el-button>
                <el-button  icon="el-icon-delete"></el-button>
            </el-button-group>
            <el-table
                    ref="multipleTable"
                    :data="tableData"
                    tooltip-effect="dark"
                    style="width: 100%"
                    @selection-change="handleSelectionChange">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>

                <el-table-column
                        label="序号"
                        width="120">
                    <template slot-scope="scope">{{ scope.$index+1 }}</template>
                </el-table-column>
                <el-table-column
                        label="服务名"
                        width="120">
                    <template slot-scope="scope"><a @click="dateTest(scope.row)">{{ scope.row.serverName }}</a></template>
                </el-table-column>
                <el-table-column
                        prop="ipAddr"
                        label="访问ip"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="execTime"
                        label="执行时间"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="restAddr"
                        label="执行路径"
                        width="120">
                </el-table-column>


                <el-table-column
                        prop="restMethod"
                        label="执行方法"
                        show-overflow-tooltip>
                </el-table-column>

                <el-table-column
                        prop="createTime"
                        label="创建时间"
                        show-overflow-tooltip>
                </el-table-column>

                <el-table-column
                        fixed="right"
                        label="操作"
                        width="240">
                    <template slot-scope="scope">
                        <el-button size="small"  @click="edit(scope.row)">
                            编辑
                        </el-button>
                        <el-button size="small"  @click="deleteData(scope.row)">
                            删除
                        </el-button>
                    </template>
                </el-table-column>

            </el-table>

            <br>
            <!--   分页        -->
            <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    layout="prev, pager, next"
                    :total="total">
            </el-pagination>
        </div>

        <!--  弹窗        -->
        <el-dialog title="新建数据" :visible.sync="dialogFormVisible" >
            <el-form :model="form">
                <el-form-item label="用户名称" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="用户年龄" :label-width="formLabelWidth">
                            <el-input v-model="form.age" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="用户地址" :label-width="formLabelWidth">
                            <el-input v-model="form.address" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-form-item label="用户性别" :label-width="formLabelWidth">
                    <el-select v-model="form.sex" placeholder="请选择性别">
                        <el-option label="男" value="男"></el-option>
                        <el-option label="女" value="女"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="出生日期" :label-width="formLabelWidth">
                    <el-col :span="11">
                        <el-date-picker type="date" placeholder="选择日期" v-model="form.date1"  style="width: 100%;" ></el-date-picker>
                    </el-col>
                    <el-col class="line" :span="2">&nbsp</el-col>
                    <el-col :span="11">
                        <el-time-picker placeholder="选择时间" v-model="form.date2"  style="width: 100%;"  ></el-time-picker>
                    </el-col>
                </el-form-item>


                <el-form-item label="活动性质" :label-width="formLabelWidth">
                    <el-checkbox-group v-model="form.type">
                        <el-checkbox label="篮球" name="type"></el-checkbox>
                        <el-checkbox label="足球" name="type"></el-checkbox>
                        <el-checkbox label="羽毛球" name="type"></el-checkbox>
                        <el-checkbox label="棒球" name="type"></el-checkbox>
                    </el-checkbox-group>
                </el-form-item>

                <el-form-item label="用户介绍" :label-width="formLabelWidth">
                    <el-input type="textarea" v-model="form.desc"></el-input>
                </el-form-item>


            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitFrom">确 定</el-button>
            </div>
        </el-dialog>
        <!--  弹窗结束  -->

        <!--  修改弹窗        -->
        <el-dialog title="数据修改" :visible.sync="dialogFormVisibleupdate" >
            <el-form :model="updateForm">
                <el-form-item label="服务名称" :label-width="formLabelWidth">
                    <el-input v-model="updateForm.serverName" autocomplete="off"></el-input>
                </el-form-item>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="服务路径" :label-width="formLabelWidth">
                            <el-input v-model="updateForm.restMethod" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="执行路径" :label-width="formLabelWidth">
                            <el-input v-model="updateForm.restAddr" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-form-item label="用户介绍" :label-width="formLabelWidth">
                    <el-input type="textarea" v-model="updateForm.ipAddr"></el-input>
                </el-form-item>

                <el-form-item label="创建日期" :label-width="formLabelWidth">
                    <el-col :span="11">
                        <el-date-picker type="date" placeholder="选择日期" v-model="updateForm.createTime"  style="width: 100%;" ></el-date-picker>
                    </el-col>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisibleupdate=false">取 消</el-button>
                <el-button type="primary" @click="updateSubmit">确 定</el-button>
            </div>
        </el-dialog>
        <!--  弹窗结束  -->
    </template>
</div>
<script src="../../js/jquery.min.js"></script>
<script>
    var Main = {
        data() {
            return {
                total:0,
                tableData: [],
                multipleSelection: [],
                dialogFormVisible:false,
                updateForm: { type: []},
                form:{},
                formLabelWidth: '120px',
                dialogFormVisibleupdate: false
            }
        },
        created(){
          var result=urldata('POST','/log/list',{pageSize:10,pageNum:1});
          this.tableData=result.rows;
          this.total=result.total;
        },
        methods: {
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            //编辑按钮
            edit(val){
                this.dialogFormVisibleupdate=true;
                this.updateForm=val;
            },
            //删除按钮
            deleteData(val){
                this.$confirm('此操作将永久删除该文件'+JSON.stringify(val)+', 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //头部选择编辑
            editorData(){
                if(this.multipleSelection.length==0){
                    this.$alert('请先选一行数据', '友情提醒', {
                        confirmButtonText: '确定',
                        callback: action => {
                            this.$message({
                                type: 'info',
                                message: '已取消'
                            });
                        }
                    });
                }else {
                    this.dialogFormVisibleupdate=true;
                }
            },
            updateSubmit(){

            },
            //表单提交按钮
            submitFrom(){
                this.$alert(JSON.stringify(this.form), '标题名称', {
                    confirmButtonText: '确定',
                    callback: action => {
                        this.$message({
                            type: 'info',
                            message: `action: ${ action }`
                        });
                    }
                });
                this.dialogFormVisible=false;
            },
            //分页条数
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            //分页页数
            handleCurrentChange(val) {
                var result=urldata('POST','/log/list?pageSize=10&pageNum='+val,{});
                this.tableData=result.rows;
                this.total=result.total;
            },
            dateTest(val){
                alert(JSON.stringify(val))
            }
        }
    }

    function urldata(request,url,obj) {
        var data = ''
        $.ajax({
            url: url,
            method: request,
            data: JSON.stringify(obj),
            async: false,
            headers: { 'Token': localStorage.getItem('Token'), 'Redirect-Header': false, 'Content-Type': 'application/json' },
            success: function (result) {
                data = result
            },
            error: function (xhr, textStatus, errorThrown) {
            }
        })
        return data;
    }

    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')
</script>
</body>
</html>